<template>
    <div class="activities-list comm-list" v-infinite-scroll="loadFun">
        <div class="establish-activities" @click="addActivities">
            <div class="icon-box">
                <i class="el-icon-circle-plus"></i>
                <div class="txt">创建活动</div>
            </div>
        </div>
        <div
            class="activities-info-row"
            v-for="(item, index) in data_list"
            :key="index"
        >
            <div class="status-box" v-if="item.status_txt">
                {{ item.status_txt }}
            </div>
            <div class="info-box">
                <div class="title-info">
                    <div class="img-box">
                        <img :src="item.img_ls ? item.img_ls[0] : img_buf" />
                    </div>
                    <div class="activities-title">
                        <div class="yd">
                            {{ item.spyun_name ? item.spyun_name + "-" : ""
                            }}{{ item.hdno }}
                        </div>
                        <div class="title">{{ item.title }}</div>
                    </div>
                </div>
                <div class="info-con">
                    <span class="key">结束时间 : </span>
                    <span class="name">{{ item.time_to_txt }}</span>
                </div>
                <div class="info-con">
                    <span class="key">参与人数 : </span>
                    <span class="name">{{ item.num_user }}</span>
                </div>
                <div class="info-con popover">
                    <span class="key">奖品情况 : </span>
                    <span class="name">{{
                        item.jp_num ? `剩余${item.jp_num}份` : "--"
                    }}</span>
                    <div>
                        <el-popover
                            placement="bottom"
                            trigger="click"
                            popper-class="popper-box"
                        >
                            <div
                                class="good-list"
                                v-if="
                                    item.jp_num_data &&
                                    item.jp_num_data.length > 0
                                "
                            >
                                <div
                                    class="good-row"
                                    v-for="(items, indexs) in item.jp_num_data"
                                    :key="indexs"
                                >
                                    {{ items.name }} {{ items.sy_num }}份
                                </div>
                            </div>
                            <span
                                class="icon"
                                slot="reference"
                                @click="getStatisticsFun(item)"
                                ><i class="el-icon-more"></i
                            ></span>
                        </el-popover>
                    </div>
                </div>
            </div>
            <div class="operation-box">
                <div class="operation-routine">
                    <div class="operation" @click="releaseFun(item)" v-if="item.status == 1">
                        <div class="icon">
                            <img :src="iconRelease" />
                        </div>
                        <div class="name">发布</div>
                    </div>
                    <div class="operation" @click="editFun(item)">
                        <div class="icon">
                            <img :src="iconEdit" />
                        </div>
                        <div class="name">编辑</div>
                    </div>
                    <div class="operation" @click="previewFun(item)">
                        <div class="icon">
                            <img :src="iconPreview" />
                        </div>
                        <div class="name">预览</div>
                    </div>
                </div>
                <div class="operation-more">
                    <el-dropdown
                        placement="bottom"
                        trigger="click"
                        @command="handleCommand"
                    >
                        <div class="icon">
                            <img :src="iconMore" />
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{ act: '1', item }"
                                >删除</el-dropdown-item
                            >
                            <el-dropdown-item :command="{ act: '2', item }"
                                >复制</el-dropdown-item
                            >
                            <el-dropdown-item :command="{ act: '3', item }"
                                >订单管理</el-dropdown-item
                            >
                            <el-dropdown-item :command="{ act: '4', item }"
                                >传播数据</el-dropdown-item
                            >
                            <el-dropdown-item :command="{ act: '5', item }"
                                >配置核销员</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <ydDialog
            ref="ydDialog"
            @handleClose="handleClose"
            :data_list="data_list"
        ></ydDialog>
		
		<popPrepublishing ref="popPrepublishing" @releaseFun="releaseFun"></popPrepublishing>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import iconMore from "../../static/images/icon-more.png";
import iconRelease from "../../static/images/icon-release.png";
import iconEdit from "../../static/images/icon-edit.png";
import iconPreview from "../../static/images/icon-preview.png";
import ydDialog from "@/components/interactive/ydDialog";
import popPrepublishing from "@/components/interactive/popPreviewpublishing.vue";
import config from "@/js/conf/Config.js";

export default {
    props: ["data_list"],
    components: { ydDialog ,popPrepublishing},
    computed: {},
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            iconMore: iconMore,
            iconRelease: iconRelease,
            iconEdit: iconEdit,
            iconPreview: iconPreview,
            yudian_list: [],
        };
    },
    created() {
        // this.getYdlistFun();
    },
    mounted() {},
    methods: {
        handleClose() {
            this.$refs.ydDialog.yddialogVisible = false;
        },
		
        releaseFun(item) {
			let that = this;
			uni.showModal({
				title:"提示",
				content:`确定要发布“${item.title}”?`,
				async success(res) {
					if(res.confirm)
					{
						let url = config.HD_MS_HDONG_HD_RELEASE;
						let param = {
						    hdongid : item.id,
						};
						let res = await that.$api({ url: url, data: param });
						if (!res) return;
						if(res.status == 1)
						{
                            that.$emit('upDataFun')
                            that.$message({
                                message: '发布成功',
                                type: 'success'
                            });
						}
					}
				}
			});
        },
        editFun(item) {
            uni.navigateTo({
                url: `/pages/interactiveActivity/create-activity?page_tab=2&cat_id=${item.cat_id}&hd_type=${item.type}&tool_id=${item.hdid}&hdongid=${item.id}&idyun=${item.shopid_yd}`,
            });
        },
        previewFun(item) {
			this.$refs.popPrepublishing.initData(item);
        },
        loadFun() {
            this.$emit("loadFun");
        },
        handleCommand(data) {
            if (data.act == 1) {
                this.$confirm("是否删除该活动?", "删除", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.delhdFun(data.item.id);
                    })
                    .catch(() => {});
            } else if (data.act == 2) {
                this.$confirm("是否复制该活动?", "复制", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.copyHdongFun(data.item.id);
                }).catch(() => {});
            } else if (data.act == 3) {
                uni.navigateTo({
                    url: `/pages/interactiveOrder/order-activity?tab=1&hdongid=${data.item.id}`,
                });
            } else if (data.act == 4) {
                uni.navigateTo({
                    url: `/pages/interactiveOrder/order-activity?tab=2&hdongid=${data.item.id}`,
                });
            } else if (data.act == 5) {
				console.log(data.item)
				this.$emit('writeOffData',data.item)
            } 
        },
        async delhdFun(id) {
            let url = config.HD_COMMON_HD_DEL;
            let param = {
                hdongid: id,
            };
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$msg({ title: res.msg });
                this.data_list.map((v, i) => {
                    if (v.id == id) {
                        this.data_list.splice(i, 1);
                    }
                });
            }
        },
		
        async getYdlistFun() {
            let url = config.YUN_SHOP_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.yun_list = res.data;
                res.data.map((v) => {
                    if (v.id == this.idyun) {
                        this.form.cpname = v.name;
                    }
                });
            }
        },
        async getStatisticsFun(item) {
            let url = config.HD_COMMON_HD_COUNT;
            let param = {
                hdongid: item.id,
            };
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data.count_info) {
                item.num_user = res.data.count_info.num_user;
                item.jp_num = res.data.count_info.num_gd;
                item.jp_num_data = res.data.count_info.nsell_gdls || [];
            }
        },
        // 复制活动
        async copyHdongFun(hdongid) {
            let url = config.HD_MS_HDONG_HD_COPY;
            let param = {
                hdongid: hdongid,
            };
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$emit('upDataFun')
            }
        },
        addActivities() {
            uni.$emit("reset_tabbar_i", { index: "1", box_index: "23" });
            uni.navigateTo({
                url: `/pages/interactiveActivity/business-promotion?cat_id=1`,
            });
        },
    },
};
</script>
<style lang="scss" scoped >
.activities-list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    max-height: calc(100vh - 125px);
    // border-bottom: 1px solid #000;
    .establish-activities {
        width: 300px;
        height: 230px;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #d7d7d7;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        .icon-box {
            text-align: center;
            i {
                font-size: 50px;
                color: #000;
            }
            .txt {
                color: #000;
                font-size: 16px;
            }
        }
    }
    .activities-info-row {
        width: 300px;
        height: 232px;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #d7d7d7;
        background: #fff;
        margin-right: 20px;
        margin-bottom: 20px;
        position: relative;
        .status-box {
            position: absolute;
            right: 0;
            top: 20px;
            color: #fff;
            background: #f39931;
            border-radius: 20px 0 0 20px;
            padding: 3px 10px;
        }
        .info-box {
            font-size: 14px;
            padding: 10px;
            .title-info {
                margin-bottom: 10px;
                display: flex;
                .img-box {
                    margin-right: 10px;
                    width: 70px;
                    height: 70px;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .activities-title {
                    width: calc(100% - 121px);
                    min-height: 70px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    .yd {
                        width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .title {
                        width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 16px;
                    }
                }
            }
            .info-con {
                .key {
                    color: #aaaaaa;
                }
                .name {
                    margin-left: 5px;
                }
                .icon {
                    margin-left: 5px;
                    border: 1px solid #000;
                    border-radius: 50%;
                    padding: 0 2px;
                    cursor: pointer;
                    font-size: 13px;
                }
                &.popover {
                    display: flex;
                }
            }
        }
        .operation-box {
            border-top: 1px solid #d7d7d7;
            background: #f2f2f2;
            // height: calc(100% - 175px);
            height: 56px;
            padding: 0 10px;
            padding-right: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            .operation-routine {
                display: flex;
                width: 250px;
                .operation {
                    margin-right: 30px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    &:last-child {
                        margin: 0;
                    }
                    .icon {
                        width: 25px;
                        height: 25px;
                        margin-right: 5px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .name {
                    }
                }
            }
            .operation-more {
                display: flex;
                align-items: center;
                .icon {
                    width: 25px;
                    height: 25px;
                    cursor: pointer;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>
